<style rel="stylesheet/scss" lang="scss" scoped>
.borderLine {
  &::before {
    content: "";
    width: 100%;
    height: 1px;
    background-image: linear-gradient(
      to right,
      #fff,
      #ccc,
      #ccc,
      #ccc,
      #ccc,
      #ccc,
      #fff
    );
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
  }
}
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 10px;
  }
}
.close-icon {
  text-align: center;
  line-height: 65px;
  .el-icon-remove {
    color: red;
  }
}
</style>
<template>
  <div v-if="reFresh">
    <el-row class="borderLine">
      <el-col :span="21">
        <el-row
          class="border-line"
          :gutter="5"
        >
          <el-col :span="12">
            <el-select
              v-model="sqlCondition.selectedField"
              size="mini"
              filterable
              placeholder="字段"
              @change="handleChange"
            >
              <el-option
                v-for="item in fields"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select
              v-model="sqlCondition.conditionSelected"
              size="mini"
              filterable
              placeholder="条件"
              @change="handleChange"
            >
              <el-option
                v-for="item in conditionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row :gutter="5">
          <el-col :span="16">
            <el-input
              placeholder="请输入内容"
              size="mini"
              v-model="sqlCondition.fieldValue"
              clearable
              @change="handleChange"
            >
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-select v-if="index < length-1"
              v-model="sqlCondition.relationValue"
              size="mini"
              filterable
              placeholder="条件"
              @change="handleChange"
            >
              <el-option
                v-for="item in relationList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col
        :span="3"
        class="close-icon"
      >
        <i
          @click="deleteHanlder"
          class="el-icon-remove"
        ></i>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {
      selectedField: "",
      conditionList: [{
        label: "等于",
        value: "="
      },
      {
        label: "大于",
        value: ">"
      },
      {
        label: "小于",
        value: "<"
      },
      {
        label: "LIKE",
        value: "like"
      },
      {
        label: "小于等于",
        value: "<="
      },
      {
        label: "大于等于",
        value: ">="
      }, {
        label: "不等于",
        value: "<>"
      }],
      conditionSelected: "等于",
      fieldValue: "",
      relationList: [{
        label: "和",
        value: "and"
      },
      {
        label: "或",
        value: "or"
      }],
      relationValue: "和",
      sqlCondition: {
        selectedField: "",
        conditionSelected: "",
        fieldValue: "",
        relationValue: ""
      },
      reFresh: true
    }
  },
  props: {
    fields: Array,
    index: Number,
    length:Number
  },
  watch: {
    sqlCondition: {
      handler (newV, oldV) {
        this.$emit('uploadData', { index: this.index, data: newV })
      },
      deep: true
    },
    fields: {
      handler () {
        this.sqlCondition = {
          selectedField: "",
          conditionSelected: "",
          fieldValue: "",
          relationValue: ""
        }
        this.reFresh = false
        this.$nextTick(() => {
          this.reFresh = true
        })

      }
    }
  },
  updated () {

  },
  methods: {
    handleChange (value) {

    },
    getValue () {

    },
    deleteHanlder () {
      let index = this.index
      this.$emit('deleteCondition', index)
    }
  }
}
</script>